<template>
  <div>
    <div class="fo">
      <div></div>
      <div class="twice">
        <div class="be">
          <div class="img">
            <img
              :src="'http://housekeepi.com/' + sleep.icon"
              :title="sleep.nick_name + '阿姨'"
            />
            <span class="mini">{{ sleep.address }}</span>
          </div>
          <div class="seeinfo">
            <div class="top">
              <div class="left">
                <h1>{{ sleep.nick_name }}阿姨</h1>
                <span class="type">{{ sleep.work_type }}</span>
              </div>
              <div class="right">
                <span class="phone">电话/微信：{{ sleep.phone }}</span>
                <span class="yuyue" @click="centerDialogVisible = true">我要预约</span>
              </div>
            </div>
            <div class="center">
              <div class="cleft">
                <span
                  >评价：
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                </span>
                <span
                  >资格证书：<i class="fa fa-check-square-o"></i>健康证
                  <i class="fa fa-check-square-o"></i>护理证</span
                >
              </div>
              <div>
                <span class="speed"
                  ><i class="fa fa-id-badge"></i>编号 36137
                  <i class="fa fa-thermometer-full"></i>1115 人浏览
                  <i class="fa fa-eye"></i>更新时间：2020-09-10</span
                >
              </div>
            </div>
            <div class="footer">
              <div class="fleft">
                <span>服务等级：高级育师</span>
                <span>户籍地址：{{ sleep.province }}</span>
                <span>最近服务区域：{{ sleep.area }}</span>
                <span>语言能力：普通话标准</span>
              </div>
              <div class="fcenter">
                <span>经 验：4年</span>
                <span>学 历：本科</span>
                <span>体 重：50kg</span>
                <span>属 相：龙</span>
              </div>
              <div class="fright">
                <span class="pr">工资：{{ sleep.h_price * 150 }}左右元/月</span>
                <span>年 龄：{{ sleep.content[0].age }}岁</span>
                <span>身 高：168cm</span>
                <span>星 座：水瓶座</span>
              </div>
            </div>
            <div class="tab">
              <p>【服务价格】</p>
              <el-link type="primary"
                >{{ sleep.h_price }}元/小时（2小时起)</el-link
              >
              <template>
                <el-table
                  :data="tableData"
                  border
                  :header-cell-style="{ textAlign: 'center' }"
                  :cell-style="{ textAlign: 'center' }"
                >
                  <el-table-column prop="date" label="时长"> </el-table-column>
                  <el-table-column prop="price" label="价格"> </el-table-column>
                </el-table>
                <el-link type="primary"
                  >注：以上为参考时长，请您根据自家的洁净程度以及具体户型来合理安排时间</el-link
                >
              </template>
            </div>
          </div>
        </div>
        <div class="table">
          <ul>
            <li v-for="(item, index) in dataarr" :key="index">
              <div class="lab">
                {{ item.lab }}
              </div>
              <div class="text">
                <p v-for="(ite, ind) in item.sub" :key="ind">{{ ite.text }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div></div>
    </div>
      <!-- 下单模块 -->
    <el-dialog
  title="谢谢你的信任"
  :visible.sync="centerDialogVisible"
  center>
    <el-steps :active="active" finish-status="success">
      <el-step title="你的需求"></el-step>
      <el-step title="有啥话捎给阿姨"></el-step>
      <el-step title="完成预约"></el-step>
    </el-steps>
    <el-form ref="form" :model="form" label-width="80px" v-if="active==0">
      <el-form-item label="服务区域">
        <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
      class="area"
      >
    </el-cascader>
    <el-input
  placeholder="Enter your address"
  v-model="form.address"
  clearable>
</el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input
        @blur="phonechange(form.phone)"
  placeholder="Enter your phonenumber"
  v-model="form.phone"
  clearable>
</el-input>
<el-link type="danger">{{msg}}</el-link>
      </el-form-item>
      <el-form-item label="服务时间">
        <el-col :span="11">
          <el-date-picker
      v-model="value2"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>
        </el-col>
      </el-form-item>
    </el-form>
    <el-input
    v-if="active==1"
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="texeare">
</el-input>
<el-alert
v-if='active==2' 
    title="你已填写完所有信息"
    type="success"
    center
    show-icon>
  </el-alert>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" :plain="true" @click="next">下一步</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { regionData,CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
        active: 0,
        centerDialogVisible: false,
        options: regionData,
      selectedOptions: [],
       msg:'',
        texeare:'',
        value2:'',
        form: {
        token:'',
        work_user_id:'',
        start_time:'',
        end_time:'',
        phone:'',
        address:'',
        province:'',
        city:'',
        area:'',
        money:''
      },
      tableData: [],
      dataarr: [
        {
          lab: "工作经历",
          sub: [
            {
              text:
                "2016年10月—2018年2月 在宏星职业培训中心兼职培训老师，给学员培训营养和育婴课程，其他空余时间会接月子单，中间带过4个新生儿",
            },
            {
              text:
                "2018年5月—2019年12月 专带上海闵行区满月男宝宝，针对性月龄喂养，洗澡、早晚抚触、 手指操，开始黑白卡识物，英语不定时启蒙磨耳，大月龄认知和大动作开始实施早教辅助教学",
            },
            {
              text:
                "2020年1月—2020年6月 专带上海奉贤区3岁男宝，针对性的时间管理及个人行为规范管理，学习单词和绘画，音乐培养，穿插简单的实践教学",
            },
          ],
        },
        {
          lab: "专业技能",
          sub: [
            {
              text:
                "喂养指导，宝宝洗澡，智力开发，蒙氏早教，抚触按摩，主被动操，专带宝宝 ，会做上海菜，辅助做家务",
            },
          ],
        },
        {
          lab: "综合评价",
          sub: [
            {
              text:
                "阿姨对孩子有爱心，有耐心，有责任心，对孩子早教有实践经验 为人坦诚 友善博爱",
            },
          ],
        },
      ],
      pickerOptions: {
        shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    };
  },
  computed: {
    ...mapState(["sleep"]),
  },
  methods: {
      next() {
        if(this.active==0){
            let flag=0
            this.form.start_time=this.value2[0].getTime()/1000
            this.form.end_time=this.value2[1].getTime()/1000
            console.log(this.form);
            Object.values(this.form).map((item,index)=>{
                if(item==''){
                    flag=1
                    return
                }
            })
            if(flag==0){
                if (this.active++ > 2) this.active = 0;
        }else{
             confirm("请填写完整你的需求")
        }
        }else if(this.active==1 && this.star==1){
            if (this.active++ > 2) this.active = 0;
            this.form.remark=this.texeare
             this.senddata(this.form)
        }else if(this.active==2){
            if (this.active++ > 2) this.active = 0;
             this.centerDialogVisible=false
             this.open2()
            // this.$router.push('/recommend')
        }
            
    },
    jump() {
      this.$router.push({ path: "/" });
    },
    creat(price) {
      for (let i = 2; i < 6; i++) {
        let obj = {};
        obj.date = i + "小时";
        obj.price = price * i + "￥";
        this.tableData.push(obj);
      }
    },
    handleChange (value) {
        this.form.province=CodeToText[value[0]]
        this.form.city=CodeToText[value[1]]
        this.form.area=CodeToText[value[2]]
      },
      phonechange(str){
      let reg=new RegExp(/^[1]+[0-9]{10}$/)
      if(reg.test(str)){
        this.msg=''
        this.star=1
      }else{
        this.msg="请输入合法手机号"
      }
    },
      senddata(val){
      this.myaxios({
      url: "http://housekeepi.com/api/addWork",
      method: "post",
      data: val
    })
      .then((e) => {
        console.log(e);
      })
      .catch(() => {
        console.log("error");
      });
  },
  open2() {
        this.$message({
          showClose: true,
          message: '恭喜你，你已预约成功',
          type: 'success',
          offset:520
        });
      },
  },
  mounted() {
    this.creat(this.sleep.h_price);
    this.form.work_user_id=this.sleep.user_id
    this.form.token=localStorage.getItem('token')
    this.form.money=this.sleep.h_price
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.area{
  width: 100%;
  border-bottom: 1px solid #000;
}
.tab{
    text-align: center;
    margin-top: 25px;
}
.pr {
  color: #ff6780;
}
.fa {
  color: #ff8900;
  margin: 0 3px;
}
.fo {
  display: grid;
  grid-template-columns: 10% 80% 10%;
}
.twice {
  display: grid;
  grid-gap: 30px;
  background: #fff;
}
.be {
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 20px;
}
.img {
  position: relative;
  padding: 5px 10px;
  display: grid;
  justify-items: center;
  align-items: center;
}
.img img {
  width: 80%;
  /* height: 100%; */
}
.seeinfo {
  padding: 20px 15px;
}
.seeinfo .top .right {
  display: grid;
  grid-gap: 15px;
  justify-items: center;
}
h1 {
  color: #ff9800;
}
.mini,
.speed {
  font-size: 16px;
  color: #ff9800;
}
.mini {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 5px;
  padding: 5px 0;
  background: rgba(253, 249, 249, 0.69);
}
.phone,
.yuyue {
  display: inline-block;
  color: #fff;
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
}
.phone {
  background: linear-gradient(90deg, #ff6780, #f3212d);
}
.yuyue {
  background: cadetblue;
}
.type {
  width: 20%;
  text-align: center;
  padding: 4px 5px;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  background: rgb(140, 159, 253);
}
.top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.left {
  display: grid;
  grid-gap: 20px;
}
.center {
  margin-top: 40px;
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
}
.center .cleft {
  display: grid;
  grid-gap: 15px;
}
.footer {
  display: grid;
  grid-gap: 35px;
  grid-template-columns: repeat(3, 1fr);
}
.footer div {
  display: grid;
  grid-gap: 30px;
  border-right: 1px solid #777;
}
.footer div:last-child {
  border-right: none;
}
.table ul {
  list-style: none;
}
.table ul li {
  display: grid;
  grid-template-columns: 20% 80%;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #f5f5f5;
}
.table ul li div {
  padding: 15px 0;
  display: grid;
}
.table ul li:last-child {
  border-bottom: none;
}
.lab {
  width: 100%;
  height: 100%;
  border-right: 2px solid #f5f5f5;
  justify-content: center;
  align-items: center;
}
.text {
  padding-left: 20px !important;
  grid-gap: 5px;
}
</style>